<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>ajax-实现异步请求</h1>
    <button onclick="getMsg()">原生js实现异步请求</button>
    <button onclick="">jquery实现异步请求</button>
<script>
    function getMsg(){
        //第一:实例化 XMLHttpRequest 对象
        var now = new XMLHttpRequest();

        //dier：初始化HTTP请求参数 open()
        now.open("get","HeLLow.db",true);

        //第三：发送请求 -now.send([data])  也可以不给值
        now.send();
        //第四:监听回调函数 -监听 readyState
        now.onreadystatechange = function (){
            //now.readyState == 4 服务器完成响应
            //now.status == 200 HTTP响应状态 200表示 ok
            if(now.readyState == 4 && now.status == 200){
                //第五：获取服务器响应的数据
               var msg = now.responseText ;
               console.log(msg);
            }
        }
        btn.onclick = function (){
            document.querySelector("#jp").innerText = getMsg();
        }
    }
</script>
</body>
</html>